<template>
  <div class="footer-box">
    <div class="footer-bar">
      <div class="footer-logo">
        <img src="../assets/image/logo.png">
      </div>
      <div class="footer-box-temp">
        <div class="footer-menu-nav">
          <ul v-for="(ulItem,index) in menuList" :key="index" class="menu-ul">
            <li v-for="(item,i) in ulItem" :key="`${index}-${i}`" :class="item.type==='title'?'menu-ui-title':'menu-ui-item'">
              <a v-if="item.link" :href="item.link">{{ item.text }}</a>
              <span v-else>{{ item.text }}</span>
            </li>
          </ul>
        </div>
        <div class="media">
          <div class="media-title">社交媒体</div>
          <div class="media-wx">
            <img class="wx" src="../assets/image/img_16.png">
            <img class="erweimaimg" src="../assets/image/image_wx.jpg">
          </div>
          <div class="address">
            support@kinghash.com
          </div>
        </div>
        <div class="copy">Copyright©2019 KingHash.All rights reserved</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      menuList: [
        [{
          type: 'title',
          text: '信息'
        }, {
          type: 'item',
          text: '关于我们',
          link: '/'
        }, {
          type: 'item',
          text: '公告中心',
          link: '/'
        }, {
          type: 'item',
          text: '技术信息',
          link: '/'
        }],
        [{
          type: 'title',
          text: '条款说明'
        }, {
          type: 'item',
          text: '购买协议',
          link: '/'
        }, {
          type: 'item',
          text: '隐私条款',
          link: '/'
        }, {
          type: 'item',
          text: '法律声明',
          link: '/'
        }],
        [{
          type: 'title',
          text: '支持'
        }, {
          type: 'item',
          text: 'Filecoin百科',
          link: '/'
        }, {
          type: 'item',
          text: '新手指南',
          link: '/'
        }]
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-box{
  background: rgb(3, 2, 4) !important;
  min-height: 264px;
  padding-bottom: 40px;
  width: 100%;
  .footer-bar{

    font-size: 12px;
    padding-top: 40px;
    width: 1180px;
    margin: 0 auto;
    position: relative;
    display: flex;
    .footer-logo{
      width: 260px;
      padding-left: 40px;
      img{
        max-height: 70px;
      }
    }
    .footer-box-temp{
      width: 900px;
      //overflow: hidden;
      position: relative;
      .footer-menu-nav{
        display: flex;
        .menu-ul{
          width: 120px;
          padding-left: 40px;
          list-style: none;
          margin: 0;
          li{
            line-height: 26px;
            color: rgb(150, 148, 144);
            & a:hover{
              color: #fff;
            }
          }
          .menu-ui-title{
            margin-bottom: 15px;
            color: #fff;
          }
        }
      }
      .media{
        position: absolute;
        right: 0;
        top: 0;
        .media-title{
          color: #fff;
          margin-top: 4px;
          margin-bottom: 20px;
        }
        .media-wx{
          position: relative;
          .wx{
            width: 24px;
            height: 24px;
            cursor: pointer;
            &:hover{
              & + .erweimaimg{
                display: block;
              }
            }
          }
          .erweimaimg{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 30px;
            right:100px;
            display: none;
          }
        }
        .address{
          padding-top: 42px;
          color: rgba(150,148,144,1) !important;
        }
      }
      .copy{
        text-align: center;
        border-top-width: 1px;
        border-top-style: solid;
        padding-top: 20px;
        font-size: 12px;
        margin-top: 80px;
        color: rgba(150,148,144,1);
        border-color: rgb(33, 33, 33);
      }
    }
  }
}

</style>
